<template>
<div class="content">




  <p style="font-size: xx-large">待完成项目信息</p>
  <div v-for="c in cardContent">
    <el-col :span="6" :offset="2">
      <el-card class="box-card" shadow="hover" :style="c.color">
        <div slot="header" class="clearfix" >
          <span>{{c.pId}}</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="toProjectPercific(c.pId)" >详情</el-button>
        </div>
        <p style="font-size: x-large">{{c.pName}}</p>
        {{c.pDes}}
      </el-card>
    </el-col>
  </div>


  <el-row style="margin-top: 80%" id="detail">
    <el-divider></el-divider>
    <p style="font-size: xx-large">项目详情</p>
    <el-col :span="20" :offset = '2'>
      <el-card class="box-card" shadow="hover">
<!--        项目的详细信息-->
        <div v-if="detailInfo">
          <el-row>
          <div id="basicInfo">
            <el-col :span="18">
          <p style="font-size: large">{{detailInfo.pId}}:{{detailInfo.pName}}</p>
          <p>项目开始时间: {{detailInfo.pCreateDate}}</p>

            <p>

<!--              <a :href="detailInfo.pFileUrl">-->
<!--                <i class="el-icon-download"></i>-->
<!--              </a>-->
              <el-button @click="getFile">当前项目文件</el-button>
            </p>
              <el-col :span="8">
                <el-card class="box-card" shadow="hover">
              <p style="color: #303133">模型组</p>
                  <el-divider></el-divider>
              组长:{{detailInfo.pModelManagerId}}<br>
              模型人员:
                  <div  v-for="stf in this.nowStaffList">
                    <div v-if="stf.sType == 4 || stf.sType == 7">
                    <p>{{stf.sName}}</p></div>
                  </div>

              </el-card>
              </el-col>
              <el-col :span="8">
                <el-card class="box-card" shadow="hover">
              <p style="color: #303133">渲染组</p>
                  <el-divider></el-divider>
              组长:{{detailInfo.pRenderManagerId}}<br>
              渲染人员:
                  <div  v-for="stf in this.nowStaffList">
                    <div v-if="stf.sType == 5 || stf.sType ==8">
                    <p>{{stf.sName}}</p></div>
                  </div>

              </el-card>
              </el-col>
              <el-col :span="8">
                <el-card class="box-card" shadow="hover">
              <p style="color: #303133">后期组</p>
                  <el-divider></el-divider>
              组长:{{detailInfo.pAfterManagerId}}<br>
              后期人员:
                  <div  v-for="stf in this.nowStaffList">
                    <div v-if="stf.sType == 6 || stf.sType ==9">
                      <p>{{stf.sName}}</p>
                    </div>
                  </div>

              </el-card>
              </el-col>

           </el-col>

            <el-col :span="4" :offset="2">
              <el-steps direction="vertical" :active="(detailInfo.pPeriodStatus==0?5:detailInfo.pPeriodStatus)">
                <el-step title="已创建" icon="el-icon-plus"></el-step>
                <el-step title="模型中" icon="el-icon-s-grid"></el-step>
                <el-step title="渲染中" description="" icon="el-icon-s-platform"></el-step>
                <el-step title="后期中" icon="el-icon-video-camera-solid"></el-step>
                <el-step title="已完成" icon="el-icon-medal-1"></el-step>
              </el-steps>
            </el-col>
          </div>
          </el-row>
          <el-row>
            <el-divider><i class="el-icon-s-promotion"></i></el-divider>
          </el-row>



          <el-col :span="10" :offset = '8'>
            <el-card class="box-card" shadow="hover">
<!--              <el-upload-->
<!--                class="upload-demo"-->
<!--                drag-->
<!--                action="C:\Users\27879\source\repos\CodeWorkSapce\HTML\vue_learn\epm-fg\lala.png"-->
<!--                multiple>-->
<!--                <i class="el-icon-upload"></i>-->
<!--                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>-->
<!--&lt;!&ndash;                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>&ndash;&gt;-->
<!--              </el-upload>-->
              <el-row>

                <p>文件上传</p>

                </el-row>
              <el-row>
              <i class="el-icon-upload" ></i>
                </el-row>
              <form id="Form" style="height: 1%">

                  <input style="margin-left: 0%;border-radius: 0px;background-color: #d3d4d6;" type="file" name="file" value="请选择文件"/>
              </form>
              <div>
                <p style="font-size: large">提交给:</p>
                <el-row v-if="iamodm">
                  <el-radio v-model="sendFile2" label="1" border>主管</el-radio>

                  <el-radio v-model="sendFile2"   label="2" border>客户</el-radio>

                </el-row>
                <el-row v-else>
                  <p style="font-size: large">客户</p>

                </el-row>
              </div>
              <el-button   @click="this.sendData">提交</el-button>

            </el-card>
          </el-col>

        </div>
      </el-card>
    </el-col>
  </el-row>


</div>


</template>

<script>
  import Global from '../../utils/global'


  export default {
    name: 'OldToDoProject',
    data(){
      return {
        iamodm:2,
        sendFile2:1,
        hoverTitle:'来自员工10001的文件',
        isIcon:1,
        value: 0,
        // iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'],
        visible: false,
        team4choose:[

        ],
        glo:new Global,
        cardContent: [
          // {
          // pId: '100001',
          // pName: '重庆交通大学食堂美味计划',
          // pDes:'嗯嗯，这个有必要！'
          // },
        ],
        detailInfo:null,
        allSIdInThisPro:[],
        nowStaffList:[],
        salaryList:[]
      }
    },
    methods:{
      sendData(){

        var timestamp = (new Date()).valueOf();
        var token = md5("epms" + timestamp);
        var form=document.querySelector("#Form");
        //将获得的表单元素作为参数，对formData进行初始化
        var formdata=new FormData(form);
        formdata.append("type",JSON.parse(sessionStorage.getItem('StaffInfo')).sType)
        formdata.append("pId",this.detailInfo.pId)
        formdata.append("cType",this.sendFile2)
        formdata.append("sId",JSON.parse(sessionStorage.getItem('StaffInfo')).sId)
        let now = (new Date()).toISOString()
        formdata.append("cCreateTime",now.split('T')[0]+ ' ' +now.split('T')[1].split('.')[0])
        // let data = {
        //   type:1,
        //   pId:this.detailInfo.pId,
        // }
        console.log(this.sendFile2,'to')
        // console.log('}}}}',formdata.get('cCreateTime'))
        // console.log('}}}}',formdata.get('pId'))
        // console.log('}}}}',formdata.get('cType'))
        // console.log('}}}}',formdata.get('sId'))
        //   file:formdata.get('file')
        let that = this
        $.ajax({
          url: this.glo.server+"staff/commit",
          data: formdata,
          method: "POST",
          headers: {
            token: token,
            timestamp: timestamp
          },
          cache: false,
          processData: false,
          contentType: false,
          success: function (res) {
            console.log('res', res);
            that.$message(res.message);
          },
          error: function (err) {
            console.log(err);
          }
        })
        // that.$message("提交成功");
      },
      inserNowList (res) {
          console.log('<',res)
          this.nowStaffList = this.nowStaffList.concat(res.data.staffList)
          // this.salaryList = this.salaryList.concat(res.data.salaryList)
          this.allSIdInThisPro= this.allSIdInThisPro.concat(res.data.staffList.map((x)=>x.sId))
        },
      initProjectPage(res){
        res = res.data.commitLogList;
        this.proList  = res;
        sessionStorage.setItem('ProInfoOfOne',JSON.stringify(res))
        for (var pro in res){
          // console.log(res[pro].pPeriodStatus)
          if(res[pro].pPeriodStatus === 0 )continue;
          this.cardContent.push(
            {
              pId:res[pro].pId,
              pName:res[pro].pName,
              pDes:'无描述信息',
              color:"background:"+['#cccccc','#d1dbe5','#d9d9d9','#DCDFE6'][parseInt(Math.random()*100)%4]
            }
          )
        }
      },
      getFile(){
         var timestamp = (new Date()).valueOf();
         var token = md5("epms" + timestamp);
         window.open("http://47.92.227.185:8080/download/projectFile?token="+token+"&timestamp="+timestamp+"&pId="+this.detailInfo.pId);

      },
      toProjectPercific(pId){
        this.team4choose = []
        this.nowStaffList = []
        this.$message('check'+pId);
        this.detailInfo = this.proList.filter((x)=>x.pId == pId)[0]

        var data = {
          type: 1,
          pId: this.detailInfo.pId
        }
        this.glo.sendDate(this.glo.server+'manager/getOwnProjectStaff',data,this.inserNowList)

        var data = {
          type: 2,
          pId: this.detailInfo.pId
        }
        console.log('data',data);
        console.log('manager/getOwnProjectStaff')
        this.glo.sendDate(this.glo.server+'manager/getOwnProjectStaff',data,this.inserNowList)
        var data = {
          type: 3,
          pId: this.detailInfo.pId
        }



        this.glo.sendDate(this.glo.server+'manager/getOwnProjectStaff',data,this.inserNowList)

        // console.log(this.nowStaffList)
        // console.log(this.allSIdInThisPro)
        // console.log('l',this.salaryList)



        //将我的组员渲染出来
        //修改team4choose
        let stype = JSON.parse(sessionStorage.getItem('StaffInfo')).sType;

        // this.glo.sendDate(this.glo.server+'manager/getOwnStaff',
        //   {
        //     type:stype
        //   },this.insertTeam4Ch)

        window.location.hash = '#detail';
      },
      // insertTeam4Ch (res) {
      //   console.log('pro',this.allSIdInThisPro)
      //   let that = this
      //   // console.log(res.data.staffList[staff].sId,res.data.staffList[staff].sId in this.allSIdInThisPro)
      //   let data={
      //     sId:JSON.parse(sessionStorage.getItem('StaffInfo')).sId,
      //     type:JSON.parse(sessionStorage.getItem('StaffInfo')).sType,
      //     pId:this.detailInfo.pId
      //   }
      //   // this.glo.sendDate(this.glo.server+'manager/getSalaryList',data,this.handelSalay)
      //
      //
      //   // console.log('====\n')
      //   this.sala = JSON.parse(sessionStorage.getItem('sala'))//==================
      //   console.log(res.data.staffList)
      //   for (var staff in res.data.staffList){
      //
      //
      //     this.team4choose.push(
      //       {
      //         sId:res.data.staffList[staff].sId,
      //         sName:res.data.staffList[staff].sName,
      //         choosed:this.allSIdInThisPro.indexOf(res.data.staffList[staff].sId) >=0,
      //         quality:0,
      //     // this.allSIdInThisPro.indexOf(res.data.staffList[staff].sId) < 0?0:this.sala.filter(
      //     //       (x)=>(x.sId == res.data.staffList[staff].sId)
      //     //     )[0].sQuality,//这一部分，若这个员工不是我的员工，就是0，若是我的员工，从所有的员工列表中获取其sQuality
      //         check:0//出勤
      //       }
      //     )
      //
      //   }
      //   //console.log(this.team4choose)
      // },



      checkFile(){
        this.$message("查看文件中");
      }
    },
    mounted () {
      if ([4,5,6].indexOf(JSON.parse(sessionStorage.getItem('StaffInfo')).sType) >= 0){
        //该员工是生手
        this.iamodm = 0;
      }

      // console.log(JSON.parse(sessionStorage.getItem('StaffInfo'))+'\n=======')
      let data = {
        sId:JSON.parse(sessionStorage.getItem('StaffInfo')).sId
      }
      this.glo.sendDate(this.glo.server+'manager/getOwnProject',data,this.initProjectPage)
    },
  }
</script>

<style scoped>
  .el-col{
    margin-bottom: 3%;
  }
  .time {
    font-size: 13px;
    color: #999;
  }
  p{
    color: #666666;
  }
</style>
